<template>
  <div class="home">
    <div class="top-nav">
      <h3>{{ sayhi }}</h3>
      <h2>{{ nickName }}</h2>
      <van-search v-model="value" placeholder="请输入商品名称" shape="round" 
      @search="search"/>
    </div>
    <div class="allhome">
      <div class="swipe">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item, index) in imgs" :key="index" @click="go(item.pid)">
            <img :src="item.bannerImg" alt="" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="isHot">
        <div>热卖推荐</div>
      </div>
      <div class="content">
        <van-grid :gutter="10" :column-num="2" square>
          <van-grid-item v-for="(item, index) in isHot" :key="index" @click="go(item.pid)">
            <div class="hotIcon">hot</div>
            <van-image :src="item.smallImg" />
            <div class="name">
              <div class="cn">{{ item.name }}</div>
              <div class="en">{{ item.enname }}</div>
            </div>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      value: "",
      imgs: [],
      nickName: "亲爱的客户",
      sayhi: "",
      isHot: [],
    };
  },
  methods: {
    // 获取轮播图
    getTypeData() {
      this.axios({
        methods: "GET",
        url: "/banner",
      })
        .then((res) => {
          if (res.data.code === 300) {
            this.imgs = res.data.result;
          }
        })
        .catch((err) => {
          
        });
    },
    // 获取用户的个人信息
    getInfo() {
      let token = this.$cookies.get("TOKEN");

      this.axios({
        method: "GET",
        url: "/findMy",
        params: {
          tokenString: token,
        },
      })
        .then((res) => {
          this.nickName = res.data.result[0].nickName;
        })
        .catch((err) => {
          
        });
    },
    // 获取当前时间
    getNowTime() {
      let currentDate = new Date();
      let h = currentDate.getHours();
      if (h >= 0 && h < 5) {
        // 
        this.sayhi = "凌晨好";
      } else if (h >= 5 && h < 12) {
        // 
        this.sayhi = "早上好";
      } else if (h >= 12 && h < 18) {
        // 
        this.sayhi = "下午好";
      } else if (h >= 18 && h < 24) {
        // 
        this.sayhi = "晚上好";
      }
    },
    // 查询热卖商品
    checkHot() {
      // 发送请求
      this.axios({
        method: "GET",
        url: "/typeProducts",
        params: {
          key: "isHot",
          value: 1,
        },
      })
        .then((res) => {
          
          if (res.data.code === 500) {
            res.data.result.forEach((v) => {
              this.isHot.push(v);
            });
            // this.isHot = res.data.result;
            
          }
        })
        .catch((err) => {
          
        });
    },
    // 搜索商品
    search(){
      if(this.value === ""){
        return
      }
        this.$router.push({name:"Search",query:this.value})
    },
    // 跳转商品详情
    go(item){
      this.$router.push({name:"Goods",query:{item}})
    }
  },
  created() {
    this.getTypeData(), this.getInfo(), this.getNowTime(), this.checkHot();
  },
};
</script>

<style lang="less" scoped>
.home {
  background-color: rgb(247, 247, 247);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.allhome {
  overflow-y: auto;
  position: fixed;
  top: 46px;
  bottom: 40px;
  left: 0;
  right: 0;
}
.top-nav {
  background-color: #fff;
  display: flex;
  position: sticky;
  top: 0;
  align-items: center;
  h3 {
    padding: 0 15px;
  }
  h2 {
    font-size: 14px;
    color: rgb(12, 52, 186);
  }
}
/deep/ .van-search {
  width: 50%;
  margin-left: auto;
}

.swipe {
  margin: 10px;
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    text-align: center;
  }
  img {
    width: 100%;
    height: 100%;
    border-radius: 15px;
  }
}
.isHot {
  background-color: white;
  padding: 10px 0px;
  div {
    background-color: #0c34ba;
    color: white;
    padding: 10px;
    display: inline-block;
    margin-left: 5px;
    border-top-right-radius: 15px;
  }
}
.content {
  margin-top: 20px;
  .hotIcon{
    width: 25px;
    height: 25px;
    position: absolute;
    top: 12px;
    left: 30px;
    background-color: #0c34ba;
    z-index: 1000;
    color: white;
    text-align: center;
    line-height: 25px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }
  /deep/ .van-grid-item {
    padding: 10px 0px 45px 0px;
    box-sizing: border-box;
    text-align: left;
  }
  /deep/ .van-image {
    img {
      border-radius: 15px;
      width: 85%;
      //  height: 90%;
      margin-left: 7.5%;
      //  margin-top: 5px;
    }
  }
  /deep/ .van-grid-item__content {
    padding: 5px;
  }
  .name {
    padding-top: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 135px;
    div {
      padding-bottom: 5px;
      color: #666;
    }
    .cn {
      font-size: 16px;
    }
    .en {
      font-size: 12px;
    }
  }
}
</style>